<template>
    <qly-base-page title="座位排布" bg-page-color="#fff" padding="2rpx 0" footer-padding="12rpx 0 0">
        <view class="seat-box" v-for="(k,i) in twoDArray" :key="i">
            <template v-for="(item,index) in k" :key="index">
                <view class="seat-item">{{ item }}</view>
                <view v-if="index===1" class="seat-placeholder"></view>
            </template>
        </view>
        <template #footer>
            <view class="seat-box">
                <view class="seat-item w20">123</view>
                <view class="seat-item w20">123</view>
                <view class="seat-item w20">123</view>
                <view class="seat-item w20">123</view>
                <view class="seat-item w20">123</view>
            </view>
        </template>
    </qly-base-page>
</template>
<script setup>
function convertTo2DArray(arr, groupSize = 4) {
    return arr.reduce((result, item, index) => {
        // 计算当前数据应归属的组索引
        const groupIndex = Math.floor(index / groupSize);
        // 如果该组不存在，则创建新组
        if (!result[groupIndex]) {
            result[groupIndex] = [];
        }
        // 将当前数据添加到对应组中
        result[groupIndex].push(item);
        return result;
    }, []);
}

// 测试使用（100条数据示例）
const originalArray = Array.from({length: 100}, (_, i) => `数据${i + 1}`);
const twoDArray = convertTo2DArray(originalArray, 4);

console.log(twoDArray); // 输出：25（100/4=25组）
console.log(twoDArray[0]); // 输出：4（每组4条数据）
</script>
<style scoped lang="scss">
.seat-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12rpx;
    
    .seat-item {
        width: 22%;
        padding: 12rpx;
        background-color: #f5f5f5;
        border-radius: 18rpx;
        box-sizing: border-box;
        text-align: center;
    }
    
    .w20 {
        width: 20%;
    }
    
    .active {
        background-color: $qly-primary-color;
    }
    
    .seat-placeholder {
        width: 12%;
    }
}
</style>
